<template>
  <a-modal
    :visible="visible"
    :title="title"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('submit') }"
  >
    <a-form layout="vertical" :form="form">

      <a-form-item label="系统" >
        <a-select
          v-decorator="[
            'systemId',
            {
              initialValue: initialFormValue == null ? 0 : initialFormValue.systemId,
              rules: [{ required: true, message: '请选择系统' }],
            }
          ]"
          placeholder="请选择">
          <a-select-option v-for="type in systemOptions" :key="type.value" :value="type.value">{{ type.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <!-- <a-form-item label="平台" >
        <a-select
          v-decorator="[
            'domain',
            {
              initialValue: initialFormValue == null ? 0 : initialFormValue.domain,
              rules: [{ required: true, message: '请选择平台' }],
            }
          ]"
          placeholder="请选择">
          <a-select-option v-for="type in domainOptions" :key="type.value" :value="type.value">{{ type.label }}</a-select-option>
        </a-select>
      </a-form-item> -->
      <a-form-item label="事件类型" >
        <a-select
          v-decorator="[
            'eventType',
            {
              initialValue: initialFormValue == null ? 0 : initialFormValue.eventType,
              rules: [{ required: true, message: '请选择事件类型' }],
            }
          ]"
          placeholder="请选择">
          <a-select-option v-for="type in eventOptions" :key="type.value" :value="type.value">{{ type.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="事件ID" >
        <a-input
          v-decorator="[
            'eventId',
            {
              initialValue: initialFormValue.eventId,
              rules: [{ required: true, message: '请输入事件ID，长度小于20', max: 20 }],
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="事件说明" >
        <a-input
          v-decorator="[
            'eventName',
            {
              initialValue: initialFormValue.eventName,
              rules: [{ required: true, message: '请输入事件说明，长度小于50', max: 50 }],
            }
          ]"
        />
      </a-form-item>
      <a-form-item label="id" style="display: none">
        <a-input
          v-decorator="[
            'id',
            {
              initialValue: initialFormValue.id
            }
          ]"
        />
      </a-form-item>

    </a-form>
  </a-modal>
</template>
<script>
export default {

  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    initialFormValue: {
      type: Object,
			default: null
    }
  },
  data () {
    return {
      systemOptions: [
        { label: this.$const.SYSTEM_TYPE.PAYMENT.desc, value: this.$const.SYSTEM_TYPE.PAYMENT.value },
        { label: this.$const.SYSTEM_TYPE.CONSENT.desc, value: this.$const.SYSTEM_TYPE.CONSENT.value },
        { label: this.$const.SYSTEM_TYPE.SOURCE.desc, value: this.$const.SYSTEM_TYPE.SOURCE.value }
      ],
      domainOptions: [
        { label: this.$const.DOMAIN_TYPE.PC.desc, value: this.$const.DOMAIN_TYPE.PC.value },
        { label: this.$const.DOMAIN_TYPE.MP.desc, value: this.$const.DOMAIN_TYPE.MP.value },
        { label: this.$const.DOMAIN_TYPE.PAD.desc, value: this.$const.DOMAIN_TYPE.PAD.value }
      ],
      eventOptions: [
        { label: this.$const.EVENT_TYPE.CLICK.desc, value: this.$const.EVENT_TYPE.CLICK.value },
        { label: this.$const.EVENT_TYPE.BROWSER.desc, value: this.$const.EVENT_TYPE.BROWSER.value }
      ]
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  }
}
</script>
